<template>
	<uni-popup ref="popup" type="bottom" :is-mask-click ="true"
	 :z-index="uZIndex" @close="close" @maskClick="close">
		<view class="area-container">
			<view class="area-tabs">
				<view v-for="(item,index) in genTabsList" :key="index" :class="['tab-list',tabsIndex == index ? 'active': '']" @click="tabsChange(item)">{{item.name}}</view>
			</view>
			<view class="area-box">
				<view class="u-flex" :class="{ 'change':isChange }">
					<view class="area-item">
						<view class="u-padding-10 u-bg-gray" style="height: 100%;">
							<scroll-view class="scroll-item" :scroll-y="true" style="height: 100%">
								<uni-list>
									<uni-list-item :border="false" v-for="(item,index) in provinces" :key="index" :title="item.label" :name="index" :show-extra-icon="true"
									clickable @click="provinceChange(index)">
									</uni-list-item>
								</uni-list>
							</scroll-view>
						</view>
					</view>
					<view v-if="isChooseP" class="area-item">
						<view class="u-padding-10 u-bg-gray" style="height: 100%;">
							<scroll-view class="scroll-item" :scroll-y="true" style="height: 100%;">
								<uni-list>
									<uni-list-item :border="false" v-for="(item,index) in citys" :key="index" :title="item.label" :name="index"
									clickable @click="cityChange(index)">
									</uni-list-item>
								</uni-list>
							</scroll-view>
						</view>
					</view>
	
					<view v-if="isChooseC && level >= 3" class="area-item">
						<view class="u-padding-10 u-bg-gray" style="height: 100%;">
							<scroll-view class="scroll-item" :scroll-y="true" style="height: 100%">
								<uni-list>
									<uni-list-item :border="false" v-for="(item,index) in areas" :key="index" :title="item.label" :name="index"
									clickable @click="areaChange(index)">
									</uni-list-item>
								</uni-list>
							</scroll-view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	/**
	 * city-select 省市区级联选择器
	 * @property {String Number} z-index 弹出时的z-index值（默认1075）
	 * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker（默认true）
	 * @property {String} default-region 默认选中的地区，中文形式
	 * @property {String} default-code 默认选中的地区，编号形式
	 */
	import { areaList } from '../../http/apis.js';
	export default {
		name: 'city-select',
		props: {
			// 通过双向绑定控制组件的弹出与收起
			value: {
				type: Boolean,
				default: false
			},
			// 默认显示的地区，可传类似["河北省", "秦皇岛市", "北戴河区"]
			defaultRegion: {
				type: Array,
				default () {
					return [];
				}
			},
			// 默认显示地区的编码，defaultRegion和areaCode同时存在，areaCode优先，可传类似["13", "1303", "130304"]
			areaCode: {
				type: Array,
				default () {
					return [];
				}
			},
			// 是否允许通过点击遮罩关闭Picker
			maskCloseAble: {
				type: Boolean,
				default: true
			},
			// 弹出的z-index值
			zIndex: {
				type: [String, Number],
				default: 0
			},
			level: {
				type: Number,
				default: 3
			}
		},
		data() {
			return {
				cityValue: "",
				isChooseP: false, //是否已经选择了省
				province: 0, //省级下标
				provinces: [],
				isChooseC: false, //是否已经选择了市
				city: 0, //市级下标
				citys: [],
				isChooseA: false, //是否已经选择了区
				area: 0, //区级下标
				areas: [],
				tabsIndex: 0,
			}
		},
		watch: {
			areaCode: {
				deep: true,
				immediate: true,
				handler(newVal, oldName) {
					this.init();
				}
			},
			value(nVal, oVal) {
				if (nVal) this.$refs.popup.open();
			}
		},
		mounted() {
			// this.init();
		},
		computed: {
			isChange() {
				return this.tabsIndex > 1;
			},
			genTabsList() {
				let tabsList = [{
					name: "请选择"
				}];
				if (this.isChooseP) {
					tabsList[0]['name'] = this.provinces[this.province]['label'];
					tabsList[1] = {
						name: "请选择"
					};
				}
				if (this.isChooseC) {
					tabsList[1]['name'] = this.citys[this.city]['label'];
					if(this.level >= 3) {
						tabsList[2] = {
							name: "请选择"
						};
					}
				}
				if (this.isChooseA && this.level >= 3) {
					tabsList[2]['name'] = this.area > -1 ? this.areas[this.area]['label'] : '请选择';
				}
				
				return tabsList;
			},
			uZIndex() {
				// 如果用户有传递z-index值，优先使用
				return this.zIndex ? this.zIndex : 99;
			}
		},
		methods: {
			init() {
				// 获取所有的省份
				this.provinces = []
				this.getAreaList(0, 0);
			},
			// pId parent_id, type: 0 1 2 省市区
			getAreaList(pId, type) {
				areaList({parent_id: pId}).then(res => {
					if (type == 0) {
						res.forEach(ele => {
							this.provinces.push({
								label: ele.name,
								value: ele.id,
								code: ele.code
							})
						})
						
						this.setProvince(this.defaultRegion[0], "");
						this.setCity(this.defaultRegion[1], "");
						this.setArea(this.defaultRegion[2], "");
					} else if (type == 1) {
						this.citys = [];
						res.forEach(ele => {
							this.citys.push({
								label: ele.name,
								value: ele.id,
								code: ele.code
							})
						})
					} else if (type == 2) {
						this.areas = [];
						res.forEach(ele => {
							this.areas.push({
								label: ele.name,
								value: ele.id,
								code: ele.code
							})
						})
						if (this.areas.length === 0) {
							this.areaChange(-1)
						}
					}
				}).catch(res => {
					console.log(res);
				})
			},
			setProvince(id) {
				let k = -1;
				this.provinces.forEach((item,index) => {
					 if (item.value == id) {
						k = index;
					 }
				 })
				if(k != -1) {
					this.provinceChange(k)
				}
			},
			setCity(id) {
				let k = -1;
				this.citys.map((item,index) => {
					 if (item.id == id) {
						 k = index;
					 }
				 })
				if(k != -1) {
					this.cityChange(k)
				}
			},
			setArea(id) {
				let k = -1;
				this.areas.map((item,index) => {
					 if (item.id == id) {
						 k = index;
					 }
				 })
				if(k != -1) {
					this.isChooseA = true;
					this.area = item.name;
				}
			},
			close() {
				this.$refs.popup.close();
				this.$emit('input', false);
			},
			tabsChange(e) {
				this.tabsIndex = e.index;
				if(e.index == 0) {
					this.provinceChange(this.province)
				}
				if(e.index == 1) {
					this.cityChange(this.city)
				}
				if(e.index == 2) {
					this.areaChange(this.area)
				}
			},
			provinceChange(k) {
				this.isChooseP = true;
				this.isChooseC = false;
				this.isChooseA = false;
				this.province = k;
				this.getAreaList(this.provinces[k].value, 1)

				this.tabsIndex = 1;
			},
			cityChange(k) {
				this.isChooseC = true;
				this.isChooseA = false;
				this.isChooseS = false;
				this.city = k;
				this.getAreaList(this.citys[k].value, 2)

				// 接口读取结束
				this.tabsIndex = 2;
			},
			areaChange(k) {
				console.log('k---', k)
				this.isChooseA = true;
				this.isChooseS = false;
				this.area = k;
				if(this.level == 3) {
					let result = {};
					result.province = this.provinces[this.province];
					result.city = this.citys[this.city];
					result.area = this.area > -1 ? this.areas[this.area] : {label: '', value: 0, code: ''};
					this.$emit('city-change', result);
					this.close();
				}
			},
		}

	}
</script>
<style lang="scss">
	.area-container {
		width: 100%;
		background-color: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		height: 800rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 99;
		padding: 20rpx 0rpx 20rpx 0rpx;
		box-sizing: border-box;
	}
	.area-tabs {
		width: 100%;
		height: 72rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border-bottom: 1rpx solid #ececec;
		.tab-list {
			width: 220rpx;
			text-align:center;
			color: #2e2e2e;
			font-size: 24rpx;
			line-height: 72rpx;
			&.active {
				color: #008000;
			}
		}
	}
	.area-box {
		width: 100%;
		overflow: hidden;
		height: 800rpx;
		>view {
			width: 150%;
			transition: transform 0.3s ease-in-out 0s;
			transform: translateX(0);

			&.change {
				transform: translateX(-0%);
			}
		}
		.u-flex {
			width: 100vw;
			display: flex;
			.area-item {
				flex: 1;
				height: 800rpx;
				background-color: #fff;
				padding-bottom: 30rpx;
				box-sizing: border-box;
			}
		}
	}
	.scroll-item {
		padding-bottom: 60rpx;
		box-sizing: border-box;
	}
</style>
